// 装修店铺
<template>
  <div class="search">
    <Row>
      <Col>
        <Card style="background:linear-gradient(180deg,rgba(253,57,56,1) 0%,rgba(255,255,255,1) 100%);">
          <Row>
            <Button @click="getDataList" icon="md-refresh" type="info">刷新</Button>
            <Button @click="edit" type="primary" style="margin-left: 20px;">编辑</Button>
          </Row>
          <Row style="padding: 50px 280px 50px 280px">
            <div style="padding: 20px 0;font-size: 20px;border-bottom: 1px dashed #FD3938"><label>店铺名称：</label><i>{{data.shopName}}</i></div>
            <div style="padding: 20px 0;font-size: 20px;display: flex;border-bottom: 1px dashed #FD3938">
              <label>店铺轮播：</label>
              <div style="display: flex;flex-wrap:wrap">
                <div v-for="(item,index) in data.pics" :key="index" style="display:inline-block;" @click="handleView(item)">
                  <img :src="item" alt="" style="width: 100px;margin-right: 10px;">
                </div>
              </div>
              
            </div>
            <div style="padding: 20px 0;font-size: 20px;border-bottom: 1px dashed #FD3938"><label>联系方式：</label><i>{{data.mobile}}</i></div>
            <div style="padding: 20px 0;font-size: 20px;border-bottom: 1px dashed #FD3938"><label>地址：</label><i>{{data.address}}</i></div>
            <div style="padding: 20px 0;font-size: 20px;border-bottom: 1px dashed #FD3938"><label>经度：</label><i>{{data.longitude}}</i></div>
            <div style="padding: 20px 0;font-size: 20px;border-bottom: 1px dashed #FD3938"><label>纬度：</label><i>{{data.latitude}}</i></div>
            <div style="padding: 20px 0;font-size: 20px;border-bottom: 1px dashed #FD3938"><label>商家简介：</label><i>{{data.individualResume}}</i></div>
          </Row>
        </Card>
        <Modal title="修改店铺" v-model="modalVisible" :mask-closable='false' :width="700">
          <Form ref="formadd" :model="formadd" :label-width="100" :rules="formValidte" >
            <FormItem label="店铺名称" prop="shopName">
              <Input type="text" v-model="formadd.shopName" placeholder="请输入店铺名称" />
            </FormItem>
            <FormItem label="地址" prop="address">
              <Input v-model="formadd.address" placeholder="请输入地址" style="width: 80%" />
              <Button type="default" icon="md-refresh" style="margin-left: 10px" @click="chooseAddr">选择地址</Button>
            </FormItem>
            <FormItem label="经度" prop="longitude">
              <Input v-model="formadd.longitude" placeholder="请输入经度" style="width: 80%" />
              <Button type="default" icon="md-refresh" style="margin-left: 10px" @click="chooseAddr">选择地址</Button>
            </FormItem>
            <FormItem label="纬度" prop="latitude">
              <Input v-model="formadd.latitude" placeholder="请输入纬度" style="width: 80%" />
              <Button type="default" icon="md-refresh" style="margin-left: 10px" @click="chooseAddr">选择地址</Button>
            </FormItem>
            <!-- <FormItem label="联系方式" prop="mobile">
              <Input v-model="formadd.mobile" placeholder="请输入联系方式" />
            </FormItem> -->
            <FormItem label="图片" prop="pic">
              <upload-pic-thumb @on-change="formadd.pic=$event" ref="picsUpload" style="width:100%"></upload-pic-thumb>
            </FormItem>
            <FormItem label="商家简介" prop="individualResume">
              <Input v-model="formadd.individualResume" placeholder="请输入商家简介" type="textarea"  :autosize="true" />
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" @click="modalVisible=false">取消</Button>
            <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
          </div>
        </Modal>

        <Modal title="查看大图" v-model="visible" :width="600">
          <img :src="imgUrl" style="width: 100%">
        </Modal>
      </Col>
    </Row>

    <div>
  </div>
    </div>
</template>
<script>
import { validateName } from "@/libs/validate";
import uploadPicThumb from "@/views/my-components/xboot/upload-pic-thumb";
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import axios from 'axios';

export default {
  components: {
    uploadPicInput,
    uploadPicThumb
  },
    data(){
      return{
        data:{},
        modalVisible:false,
        total:0,
        loading: true, // 表单加载状态
        submitLoading:false,
        visible: false,
        imgUrl: "",
        formadd:{
          id:'',
          address:'',
          longitude: "",
          latitude: "",
          pic:'',
          individualResume: "",
          shopName: "",
        },
        formValidte: {
          address: [{ required: true, message: "请输入地址", trigger: "blur" },
            { validator: validateName, trigger: "blur" }],
          shopName: [{ required: true, message: "请输入店铺名称", trigger: "blur" },
            { validator: validateName, trigger: "blur" }],
          // pic: [{ required: true, message: "请选择店铺轮播", trigger: "blur", type: "array" }],
          individualResume: [{ required: true, message: "请输入个人简介", trigger: "blur" },
            { validator: validateName, trigger: "blur" }],
          longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
          latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        },
        options3: {
          disabledDate (date) {
            return date && date.valueOf() < Date.now() - 86400000;
          }
        },
      }
    },
    methods:{
      init(){
        this.getDataList();
        // this.getAreaList();
        // this.getClassList();
        // this.aaa();
      },
      handleView(url) {
        this.imgUrl = url;
        this.visible = true;
      },
      chooseAddr () {
        window.open("http://api.map.baidu.com/lbsapi/getpoint/")
      },
      changeWeedings (e) {
        console.log(e);
        this.formadd.weddingDay = e;
        console.log('weddings===='+this.formadd.weddingDay)
      },
      getAreaList () {
        var data = {
          pageSize: 1000,
          pageNumber: 1
        }
        this.postRequest("/area/getBackAreaList", data).then(res=> {
          this.loadingEdit = false;
          if (res.success) {
            res.result.data.forEach(function(e) {
              if (e.isParent) {
                e.loading = false;
                e.children = [];
              }
            });
            this.areaData = res.result.data;
          }
        })
      },
      getClassList () {
        var param = {
          pid: ""
        }
        this.postRequest("/goodCategory/getGoodCategoryList", param).then(res=> {
          this.loadingEdit = false;
          if (res.success) {
            res.result.forEach(function(e) {
              if (e.isParent) {
                e.loading = false;
                e.children = [];
              }
            });
            this.classData = res.result;
          }
        })
      },
      loadAreaData (item, callback) {
        var param = {
          pid: item.id,
          pageNumber: 1,
          pageSize: 1000
        }
        this.postRequest("/area/getBackAreaList", param).then(res=> {
          this.loadingEdit = false;
          if (res.success) {
            res.result.data.forEach(function(e) {
              if (e.isParent) {
                e.loading = false;
                e.children = [];
              }
            });
            callback(res.result.data);
          }
        })
      },
      loadClassData (item, callback) {
        var data = {
          pid: item.id,
          pageNumber: 1,
          pageNumber: 1000
        }
        this.postRequest("/goodCategory/getGoodCategoryList", data).then(res => {
          this.loadingEdit = false;
          if (res.success) {
            res.result.forEach(function(e) {
              if (e.isParent) {
                e.loading = false;
                e.children = [];
              }
            });
            callback(res.result);
          } else {
            this.$Message.warning(res.message)
          }
        });
      },
      selectTreeEdit(v, k) {
        console.log(k)
        if (v.length > 0) {
          // 转换null为""
          for (let attr in v[0]) {
            if (v[0][attr] == null) {
              v[0][attr] = "";
            }
          }
          let str = JSON.stringify(v[0]);
          let data = JSON.parse(str);
          if (data.isParent) {
            this.$Message.warning("只能选择一级分类")
          } else {
            if (k == 2) {
              this.formadd.classId = data.id;
              this.formadd.className = data.title;
            } else {
              this.formadd.areaId = data.id;
              this.formadd.areaName = data.title;
              this.$forceUpdate()
            }
          }
        }
      },
      //获取店铺列表
      getDataList(){
          this.loading = true;
          this.postRequest("/user/getBackUserParticulars").then(res =>{
            this.loading = false;
              if(res.success){
                this.data = res.result;
                this.data.pics = res.result.pic.split(",");
                // console.log('----------原先经度----------');
                // console.log(res.result.longitude);
                // console.log('------------原先纬度-----------');
                // console.log(res.result.latitude)
                // this.getRequest("http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x="+res.result.longitude+"&y="+res.result.latitude).then(res2=> {
                //   var dlng=atob(res2.x);//base64解码
                //   var dlat=atob(res2.y);
                //   //异步回调
                //   console.log('--------------现在经度-------------');
                //   console.log(dlng)
                //   console.log('--------------现在纬度-------------');
                //   console.log(dlat) 
                // })
              } else {
                this.data = []
              }
          })
      },
      edit(v){
        // console.log(v)
        this.formadd.id = this.data.id
        this.formadd.address = this.data.address
        // this.formadd.mobile = this.data.mobile
        this.formadd.shopName = this.data.shopName;
        if (this.data.pic === null) {

        } else {
          this.$refs.picsUpload.uploadList = [];
          var array = this.data.pic.split(",")
          this.$refs.picsUpload.setData(array);
        }
        
        this.formadd.areaId = this.data.areaId;
        this.formadd.areaName = this.data.areaName;
        this.formadd.email = this.data.email;
        this.formadd.classId = this.data.classId;
        this.formadd.className = this.data.className;
        this.formadd.alipayAccount = this.data.alipayAccount;
        this.formadd.individualResume = this.data.individualResume;
        this.formadd.wechatAccount = this.data.wechatAccount;
        this.formadd.weddingDay = this.data.weddingDay;
        this.formadd.longitude = this.data.longitude;
        this.formadd.latitude = this.data.latitude;
        this.modalVisible = true
      },
      //修改
      handleSubmit(){
        console.log(11111)
        this.$refs.formadd.validate(valid=> {
          console.log(2222)
          console.log(valid)
          if (valid) {
            var array1 = [];
            this.$refs.picsUpload.uploadList.forEach(item1=> {
              array1.push(item1.url)
            })
            this.formadd.pic = array1.join(',');

            var bd_lng = this.formadd.longitude;
            var bd_lat = this.formadd.latitude;

            var X_PI = Math.PI * 3000.0 / 180.0;
            var x = bd_lng - 0.0065;
            var y = bd_lat - 0.006;
            var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
            var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
            this.formadd.longitude = z * Math.cos(theta);
            this.formadd.latitude = z * Math.sin(theta);
            
            this.submitLoading = true;
            this.postRequest("/user/editOwn",this.formadd).then(res =>{
              this.submitLoading = false;
              if(res.success){
                this.$Message.success("修改成功")
                this.modalVisible = false
                this.getDataList()
              } else {
                this.$Message.error(res.message)
                this.modalVisible = false
              }
            })
          }
        })
      },
    },
    mounted(){
       this.init() 
    }
}
</script>

<style lang="less" scoped>
.search {
    .operation {
        margin-bottom: 2vh;
    }
    .select-count {
        font-size: 13px;
        font-weight: 600;  
        color: #40a9ff;
    }
    .select-clear {
        margin-left: 10px;
    }
    .page {
        margin-top: 2vh;
    }
    .drop-down {
        font-size: 13px;
        margin-left: 5px;
    }
}
</style>